import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { FarmData } from '../wind-direction.model';
import { DatePipe } from '@angular/common';
@Component({
  selector: 'app-wind-energy-echarts',
  templateUrl: './wind-energy-echarts.component.html',
  styleUrls: ['./wind-energy-echarts.component.css']
})
export class WindEnergyEchartsComponent implements OnInit {
  options: any;
  echartsIntance: any;
  data: any[][];
  @Input() currentFarm: FarmData;
  @Input() min: Date;
  @Input() max: Date;
  constructor(
    private datePipe: DatePipe
  ) { }

  ngOnInit() {
    //this.initData();

  }
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['currentFarm'] && changes['currentFarm'].currentValue) {
      if (this.currentFarm) {
        this.initData()
      }
    }
  }
  initData() {
    this.data = []
    let farmData: FarmData = this.currentFarm;
    let data: any[][] = [];
    if (!farmData.meanWindSpeed.length) return false;
    farmData.meanWindSpeed.forEach((temp, index) => {
      const obj: any[] = [temp.time, temp.value];
      let i = farmData.ambWindDir.findIndex(o => new Date(o.time).getTime() == new Date(temp.time).getTime());
      if (i > -1) {
        obj.push(farmData.ambWindDir[i].value)
      } else {
        obj.push(0);
      }
      i = farmData.temperature.findIndex(o => new Date(o.time).getTime() == new Date(temp.time).getTime());
      if (i > -1) {
        obj.push(farmData.temperature[i].value);
      } else {
        obj.push(0);
      }
      /* i = farmData.airPressure.findIndex(o => new Date(o.time).getTime() == new Date(temp.time).getTime());
      if (i > -1) {
        obj.push(farmData.airPressure[i].value)
      } else {
        obj.push(0);
      } */

      i = farmData.humidity.findIndex(o => new Date(o.time).getTime() == new Date(temp.time).getTime());
      if (i > -1) {
        obj.push(farmData.humidity[i].value)
      } else {
        obj.push(0);
      };
      data.push(obj);
    });
    this.data = data;
    this.initEcharts();
  }
  initEcharts() {
    /* let directionMap = {};
    ['W', 'WSW', 'SW', 'SSW', 'S', 'SSE', 'SE', 'ESE', 'E', 'ENE', 'NE', 'NNE', 'N', 'NNW', 'NW', 'WNW'].forEach((v, i) => {
      directionMap[v] = Math.PI / 8 * i;
    }) */

    var dims = {
      time: 0,
      meanWindSpeed: 1,
      // temperature: 1,
      ambWindDir: 2,
      temperature: 3,
      //airPressure: 4,
      humidity: 4
    };
    var arrowSize = 18;

    function renderArrow(param, api) {
      var point = api.coord([
        api.value(dims.time),
        api.value(dims.meanWindSpeed)
      ]);
      return {
        type: 'path',
        shape: {
          pathData: 'M31 16l-15-15v9h-26v12h26v9z',
          x: -arrowSize / 2,
          y: -arrowSize / 2,
          width: arrowSize,
          height: arrowSize
        },
        rotation: api.value(dims.ambWindDir),
        position: point,
        style: api.style({
          stroke: '#555',
          lineWidth: 1
        })
      };
    }

    this.options = {
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {

          return [
            this.datePipe.transform(params[0].value[dims.time], 'HH:mm'),
            params[0].marker + '风速：' + params[0].value[dims.meanWindSpeed],
            params[1].marker + '风向：' + params[0].value[dims.ambWindDir],
            params[2].marker + '温度：' + params[0].value[dims.temperature],
            //params[3].marker + '气压' + params[0].value[dims.airPressure],
            params[3].marker + '湿度' + params[0].value[dims.humidity]
          ].join('<br>');
        }
      },
      /*  legend: {
         show: true,
         orient: 'vertical',
         align: 'right',
         top: 20,
         left: 50,
         z: 100
       }, */
      grid: {
        show: true,
        top: '20%',
        left: 50,
        right: 200,
      },
      xAxis: {
        type: 'time',
        maxInterval: 3600 * 1000 * 24,
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          formatter: (value, index) => {
            return this.datePipe.transform(new Date(value), 'HH:mm');
          },
        },
        splitLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        interval: 1000 * 60 * 60 * 3,
        min: this.min,
        max: this.max
      },
      yAxis: [{
        name: '风速(m/s)',
        /* nameLocation: 'middle', */
        //nameGap: 35,
        max: 25,
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        splitLine: {
          lineStyle: {
            color: '#fff'
          }
        }
      },
      {
        name: '温度/湿度',
        /* nameLocation: 'middle', */
        // nameGap: 35,
        max: 100,
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        splitLine: { show: false }
      },
      /*  {
         name: '气压',
 
         axisLine: {
           lineStyle: {
             color: '#fff'
           }
         },
         offset: 50,
         max: 1000,
         axisLabel: {
           textStyle: {
             color: '#fff',
             fontSize: 12
           }
         },
         splitLine: {
           lineStyle: {
             color: '#fff'
           }
         }
       }, */
      {
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false }
      }],
      visualMap: {
        type: 'piecewise',
        // show: false,
        orient: 'horizontal',
        left: 'center',
        bottom: 5,
        textStyle: {
          color: '#fff',
          fontSize: 8
        },
        textGap: 5,
        itemWidth: 15,
        pieces: [{
          gte: 25,
          color: '#fe0000',
          fontSize: 10,
          label: '>=25',

        },
        {
          gte: 21,
          lt: 25,
          color: '#f93600',
          label: '21-25'
        },
        {
          gte: 17,
          lt: 21,
          color: '#f2a800',
          label: '17-21'
        },
        {
          gte: 12,
          lt: 17,
          color: '#fff600',
          label: '12-17'
        },
        {
          gte: 6,
          lt: 12,
          color: '#0900f1',
          label: '6-12'
        },
        {
          lt: 6,
          color: '#36ca34',
          label: '0-6'
        }],
        seriesIndex: 1,
        dimension: 1
      },
      /*  dataZoom: [{
         type: 'inside',
         xAxisIndex: 0,
         minSpan: 5
       }, {
         type: 'slider',
         xAxisIndex: 0,
         minSpan: 5,
         height: 20,
         bottom: 50,
         handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
         handleSize: '120%'
       }], */
      series: [

        {
          type: 'line',
          yAxisIndex: 1,
          name: '温度',
          encode: {
            x: dims.time,
            y: dims.temperature
          },
          data: this.data,
          z: 2,
        },
        {
          type: 'custom',
          renderItem: renderArrow,
          encode: {
            x: dims.time,
            y: dims.meanWindSpeed
          },
          data: this.data,
          z: 10
        }, {
          type: 'line',
          symbol: 'none',
          encode: {
            x: dims.time,
            y: dims.meanWindSpeed
          },
          lineStyle: {
            normal: {
              color: '#aaa',
              type: 'dotted'
            }
          },
          data: this.data,
          z: 1
        },
        /* {
          type: 'line',
          name: '气压',
          yAxisIndex: 2,
          encode: {
            x: dims.time,
            y: dims.airPressure
          },
          data: this.data,
          z: 2,

        }, */
        {
          type: 'line',
          yAxisIndex: 1,
          encode: {
            x: dims.time,
            y: dims.humidity
          },
          data: this.data,
          z: 2,

        },
      ],
      color: ['#000', '#ccc', '#f52633', '#f6ff00']
    }
    //console.log(this.options)
  }
  //初始化图表数据
  onChartInit(ec: any) {
    this.echartsIntance = ec;
    this.updateEchart();
  }

  //更新图表数据
  updateEchart() {
    if (this.echartsIntance != null) {
      this.echartsIntance.setOption(this.options);
    }
  }
}



// WEBPACK FOOTER //
// ./src/app/module/monitor/wind-energy/wind-direction-change/wind-energy-echarts/wind-energy-echarts.component.ts